<!DOCTYPE html>
<html>
    <head>
        <mate chatset="UTF-8">
        <title>尚品会</title>    
        <!-- 引入css -->
        <link rel="stylesheet" href="./reset.css">
        <script src="./animate.js"></script>
        <script src="./index.js"></script>
    </head>
    <body>
        <!-- 顶部导航区 -->
        <div class="topbar">
            <div class="container clearfix">
                <!-- 左侧欢迎区 -->
                <div class="welcome leftfix">
                    <span class="holle">尚品会欢迎您</span>
                    <a href="#" class="login">登录</a>
                    <a href="#" class="register">注册</a>
                </div>
                <!-- 右侧导航区 -->
                <div class="topbar-nav leftfix">
                    <ul class="list clearfix">
                        <li><a href="#">商家后台</a></li>
                        <li><a href="#">合作招商</a></li>
                        <li><a href="#">关注商品会</a></li>
                        <li><a href="#">企业采购</a></li>
                        <li><a href="#">尚品汇会员</a></li>
                        <li><a href="#">我的商品汇</a></li>
                        <li><a href="#">我的购物车</a></li>
                        <li><a href="#">我的订单</a></li>
                    </ul>

                </div>
            </div>
            

        </div>
        <!-- 头部LOGO搜索区 -->
        <div class="header">
            <div class="container clearfix">
                <!-- 左侧logo区 -->
                <div class="logo leftfix">
                    <div>商品会</div>
                </div>
                <!-- 右侧输入框区 -->
                <div class="search rightfix">
                    <form action="#" >
                        <input type="text">
                        <button>搜索</button>
                    </form>
                </div>
            </div>
        </div>
        <!-- 主导航区 -->
        <div class="mainnav">
            <div class="container clearfix">
                <div class="divive leftfix">商品分类</div>
                <div class="mainnavbar leftfix ">
                   <ul class="list clearfix" >
                    <li><a href="#">超市</a></li>
                    <li><a href="#">优惠</a></li>
                    <li><a href="#">生鲜</a></li>
                    <li><a href="#">大牌</a></li>
                    <li><a href="#">会员</a></li>
                    <li><a href="#">美妆</a></li>
                    </ul> 
                </div>
            </div>
            <hr>
        </div>
        <!--主要内容区 -->
        <div class="menu">
            <div class="main-content">
                <div class="container clearfix">
                    <!-- 左侧导航栏 -->
                    <ul class="slider-nav leftfix">
                        <li><a href="#">手机运营</a></li>
                        <li><a href="#">电脑办公</a></li>
                        <li><a href="#">男装女装</a></li>
                        <li><a href="#">美妆护肤</a></li>
                        <li><a href="#">女鞋箱包</a></li>
                        <li><a href="#">男鞋运动</a></li>
                        <li><a href="#">母婴玩具</a></li>
                        <li><a href="#">汽车用品</a></li>
                        <li><a href="#">视频烟草</a></li>
                        <li><a href="#">艺术礼品</a></li>
                        <li><a href="#">医药保健</a></li>
                        <li><a href="#">图书文娱</a></li>
                        <li><a href="#">机票酒店</a></li>
                        <li><a href="#">安装维修</a></li>
                    </ul>
                    <!-- 轮播图区域 -->
                    <div class="banner leftfix">
                        <!-- 左侧按钮 -->
                        <a href="#" class="arrow-l">
                            &lt;
                        </a>
                         <!-- 右侧按钮 -->
                        <a href="#" class="arrow-r">
                            &gt;
                        </a>
                        <!-- 核心滚动区域 -->
                        <ul class="bannerimg">
                            <li>
                                <a href="#"><img src="../图片/轮播图1.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="../图片/轮播图2.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="../图片/轮播图3.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="../图片/轮播图4.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="../图片/轮播图5.jpg" alt=""></a>
                            </li>
                        </ul>
                        <!-- 小圆圈 -->
                         <ol class="circle">
                            
                         </ol>
                    </div>
                    <!-- 右侧导航区 -->
                    <div class="slide-other leftfix"></div>
                </div>
            </div>
        </div>
    </body>
</html>